10. HTML/XHTML.
10.2. KompoZer, un editor Web multiplataforma.
10.5. Los vínculos e hipervínculos.
10.6. Tratamiento de imágenes. Mapas sensibles.
10.1. Introducción a HTML.
Adentrémonos en el desarrollo de páginas Web. En general la composición de las páginas se basa en HTML “Hipertext Markup Language” o Lenguaje de Marcado de Hipertexto.
Este lenguaje surge en la comunidad científica para cubrir la necesidad de publicar, compartir y buscar información las 24 horas del día. Ofreciéndonos un lenguaje universal e independiente del ordenador, plataforma, red y sistema operativo que utilicemos.
|
|
HTML se basa en el modelo SGML lenguaje estándar de marcado generalizado y utiliza el protocolo HTTP Hypertext Transfer Protocol o Protocolo de transferencia de hipertexto. SGML define las reglas de etiquetado de documentos, y de él derivan entre otros XML y XHTML. |
Para empezar, lo único que necesitas para generar páginas Web es un editor de textos, unos pocos conocimientos técnicos, guardar los documentos que crees en formato html o htm y un cliente Web, tipo Mozilla Firefox o Internet Explorer.
A la hora de construir páginas Web has de tener en cuenta los elementos de los que dispones, son los siguientes:
* Etiquetas. Tienes que conocer el conjunto de etiquetas que componen este lenguaje. Existen dos tipos de etiquetas: de apertura “< etiqueta >” y de cierre “< /etiqueta>”. Un ejemplo sería:<HTML> </HTML>
* Atributos. Modificadores o argumentos para las etiquetas. Siempre se incluyen en la etiqueta de apertura.
* Valores. Para los atributos.
|
|
Observa este ejemplo, para especificar el tamaño de la fuente:
Respectivamente identificamos: Etiqueta <FONT> </FONT> Atributo SIZE Valor 2. |
Con estas nociones ya podemos escribir nuestras primeras páginas Web. Para profundizar en el lenguaje existen infinitud de manuales en la red, basta con poner las palabras claves “Manual” y “HTML” en tu buscador preferido y observar la cantidad de resultados que obtienes. No obstante, desde aquí te proponemos las siguientes: http://es.wikipedia.org/wiki/HTML, http://www.desarrolloweb.com/html/, http://www.webestilo.com/html/, y http://www.tejedoresdelweb.com/.
10.2. KompoZer, un editor Web multiplataforma.
Una herramienta específica para la edición de páginas Web, es KompoZer, que lo puedes encontrar en http://www.kompozer.net/. Este editor es el sucesor de NVU y existen versiones para sistemas Windows, GNU/Linux e incluso MacOS. KompoZer está diseñado para ser “extremadamente sencillo de usar”, siguiendo un esquema WYSIWYG, What You See Is What You Get, lo que ves es lo que obtienes.
En GNU/Linux, para la edición Web cuentas además con Quanta y Bluefish, disponibles con los paquetes quantaybluefish.
Para la instalación en Windows, descárgate el fichero .rar, descomprímelo y haz doble clic sobre el archivo kompozer.exe, en Ubuntu bastará con instalar el paquete kompozer.
|
|
Para descomprimir un fichero .rar en Windows, puedes utilizar 7-zip que es un descompresor open source de los siguientes tipos de archivos: RAR, CAB, ISO, ARJ, LZH, CHM, MSI, WIM, Z, CPIO, RPM, DEB y NSIS. Lo puedes descargar de http://www.7-zip.org/. |
Veamos ahora como castellanizar nuestro Kompozer. Sigue los siguientes pasos:
1. Navega a la siguiente dirección del Proyecto Nave, http://www.proyectonave.es/.
2. Dirígete en el panel izquierdo de Navegación a la sección de Descarga.
3. En el panel central, verás dentro de la sección dirigida a KompoZer/Nvu tres enlaces: una para instalar la versión de Windows, otra para GNU/Linux y otra, que es la que ahora nos interesa dice XPI de idioma.
4. Haz clic con el botón derecho del ratón y selecciona Guardar enlace como… y guárdalo en tu directorio HOME.
5. En KompoZer dirígete a Tools, Extensions.
|
|
Tal como se muestra en la figura, busca y abre (Open) el fichero que acabas de descargar. |
|
|
6. Inmediatamente te pide permiso para instalar dicho software, haz clic en Install Now, instalar ahora. 7. Sólo tienes que reiniciar KompoZer para poder utilizarlo en el idioma de Cervantes. |
10.3. Primeros pasos.
La estructura general de toda página Web es la siguiente:
|
<HTML> <HEAD> <TITLE> Título de la página </TITLE> </HEAD> <BODY> Cuerpo de la página </BODY> </HTML> |
Examinemos las etiquetas: * HTML. Indica que es una página Web. Se tiene que poner al principio y al final del documento. * HEAD. Cabecera, información genérica sobre la página. * TITLE. Ubicado dentro de la cabecera, define el título del documento que aparecerá en la barra de título del navegador. * BODY. Cuerpo de la página. Todo lo que incluyamos aquí aparecerá en el navegador. |
|
|
Veamos cómo realizarla con Kompozer: |
1. Lanza la aplicación.
2. Kompozer es un editor que sigue la filosofía WYSIWYG, lo que ves es lo que obtienes. Para ello disponemos de diferentes vistas de un mismo documento, parte inferior de la ilustración:
Normal. Aquí es donde se aplica la filosofía WYSIWYG al 100%. Sólo tienes que introducir el contenido de la página y él automáticamente se encargará de generarnos las respectivas etiquetas HTML necesarias.
Etiquetas HTML. Proporciona una vista específica de las etiquetas que tenemos incluidas en nuestro documento.
Código Fuente. Visualización del código fuente de la página cómo si la realizáramos con un editor de textos simple.
Vista preliminar. Muestra como verá el cliente, es decir, un navegador, la página que estamos diseñando.
3. Sitúate en la vista normal y escribe: Hola Mundo.
|
|
4. Haz clic en el disquete para salvar la página Web.
Observa como te aparece una ayuda cuando aproximas el ratón al disquete. |
|
|
5. Debes dar un nombre a tu página Web e indicar dónde deseas guardarla. Además deberás considerar tener un directorio de trabajo si vas a crear muchas páginas para así organizarte mejor. |
|
|
6. Ahora, haz clic en la pestaña Código Fuente. 7. Escribe entre las etiquetas TITLE: [Aprende en Libre] Primeros Pasos. |
8. Para ver el resultado obtenido pulsa en la pestaña Vista Preliminar. Fíjate como en el título aparece “[Aprende en Libre] Primeros pasos”.
Si examinas con atención el código fuente de la página que acabamos de realizar de ejemplo y el expuesto previamente en el capítulo sobre la estructura general de una página Web, observarás que aparecen un par de etiquetas que no habíamos mencionado, concretamente:
En la primera línea <!DOCTYPE…etc. Esta etiqueta declara el tipo de documento, más concretamente indica al navegador del cliente que lo que está procesando es una página Web así como la versión de HTML.
Dentro de la sección cabecera aparece la etiqueta <META…etc. El objetivo de ésta es incluir información adicional, metadatos, de referencia sobre la página. Aunque invisibles para el usuario contienen información relevante para el navegadory buscadores como palabras claves, descripción, autor, etc.
10.4. Dando formato al texto.
|
|
Para configurar los atributos del texto, asignarle color, cambiar el tamaño, la fuente, alineación, etc. dispones de la barra de formato de texto. En la ilustración te mostramos el detalle. También puedes utilizar las diversas opciones del menú Formato. |
|
|
Realicemos un ejemplo: Una lista con los días de la semana.
1. Lanza la aplicación y sitúate en la vista Normal. 2. Escribe los días de la semana uno debajo de otro. 3. Selecciónalos todos. |
|
4. Sigue la secuencia, Formato, Tipo Letra, FreeMono. 5. Ahora cambiemos el tamaño, Formato, Tamaño, Muy Grande. 6. Pongamos los días en negrita: Formato, Estilo de texto, Negrita. 7. Cambiemos el color desde Formato, Color del texto… elige el que desees y haz clic en Aceptar. 8. También podremos añadir viñetas: Formato, Lista, No numerada. En Formato, Lista, Propiedades de la lista… podrás cambiar el tipo de las viñetas. |
|
Además del menú formato, donde encontrarás todas las opciones de formato, dispones de otra barra de herramientas para las listas y configuración de los parámetros del cuerpo de la página, etiqueta BODY en código HTML. En la siguiente ilustración te la mostramos en detalle.
10.5. Los vínculos e hipervínculos.
En el argot de Internet cuando decimos estamos navegando por la red, nos referimos a la facilidad que tenemos de pasar de un documento a otro con un simple clic. Esto lo realizamos mediante los enlaces. Los enlaces facilitan una navegación cómoda, no lineal y bastante intuitiva.
Podemos distinguir dos tipos de enlaces: los vínculos y los hipervínculos, mientras que los primeros hacen referencia a un enlace al propio documento, los segundos se refieren a otros documentos.
Ejemplo de creación de vínculos:
|
|
|
|
Para clarificar estos conceptos vamos a crear una lista con 50 números, de tal manera que al principio de la misma introducimos la entrada “Primero” y al final de la lista la entrada “Volver al principio” |
|
|
|
1. Una vez escrita la lista, selecciona el texto “Principio”. 2. Haz clic en el botón Enlace Interno (es una ancla). 3. Escribe el nombre del enlace y pulsa Aceptar. Esto que estamos realizando en KompoZer se llama en otros programas marcadores. |
|
|
4. Sitúate al final de la lista y selecciona el texto “Volver al principio”. 5. Haz clic en el botón Enlace (es una cadena). 6. Despliega el cuadro de Ubicación del enlace y selecciona #Principio. 7. Ya sólo tienes que probarlo en el navegador.
|
|
<a name=”Principio”></a>Principio<br> 1<br> […] 50<br> <a href=”#Principio”><br> |
Observa el código que nos ha creado, con la etiqueta aseguida de name definimos un marcador, un ancla o destino de llegada. Con a y href definimos un vínculo al primero. |
El proceso de creación de hipervínculos es muy similar, simplemente al hacer clic sobre el botón Enlace, debemos indicar la dirección Web donde deseamos se vincule.
|
|
Observa el ejemplo, hemos seleccionado Google Que buen buscador y pulsado sobre Enlace. Ahora escribimos en la Ubicación del enlace la dirección http://www.google.es y hacemos clic en Aceptar. |
|
Enlace: 1.Punto de llegada: <a name=miMarcador></a> 2.Punto de origen: <a href=#miMarcador>miEnlace</a> Hipervínculo: <a href=midireccionWeb>miPáginaWeb</a> |
Fíjate el código fuente, con a y href definimos un hipervínculo. La diferencia de la anterior es que no se encuentra la almohadilla. |
Si quieres crear el típico Escríbeme o Contacta con el autor, en el enlace bastará escribir: mailto: tucorreo@servidorCorreo, es decir:
|
<a href=mailto:tuCorreo@servidorCorreo>Contacta con el autor</a> |
Esta opción no es ideal, pero si práctica y funcional.
10.6. Tratamiento de imágenes. Mapas sensibles.
|
Para insertar una imagen pulsa sobre el botón Imagen
Aparecerá la ventana de propiedades de la imagen, en esta tienes que seleccionar la Ubicación de la imagen. Además dispones de la inserción de texto (opción alternativa pero muy aconsejable, por si no se puede visualizar la imagen y para ser “amigable” con los motores de búsqueda) y las pestañas Dimensiones, Apariencia y Enlace que te permiten configurar todos los parámetros de la misma. |
|
||
|
El código HTML para crear la imagen es:
En particular con Dimensiones podrás alterar el tamaño que se mostrará en pantalla (normalmente si las cambias te interesará activar Mantener proporciones, es decir, que el alto y el ancho disminuyan o aumenten proporcionalmente), con Apariencia podrás ajustar la alineación de la imagen respecto al texto (atributo align), si quieres que el usuario navegue a una página Web cuando pulse la imagen, selecciona la pestaña Enlace. En código HTML un ejemplo sería:
Como se puede apreciar hemos introducido un borde sólido de 5 puntos y modificado el ancho y la altura de la imagen original. |
|||
|
Este sería el código HTML de la figura, observa que el texto está alineado en la parte inferior de la imagen:
Si no quedarás satisfecho con el comportamiento por defecto, selecciona la imagen, haz clic con el botón derecho del ratón y en el menú contextual selecciona Propiedades de imagen. Volverás a tener el cuadro de diálogo anterior. |
|
||
|
Si queremos que el texto se alinea al centro de la imagen, bastará con seleccionar en la pestaña Apariencia, en la caja de diálogo Alinear el texto con la imagen y seleccionar En el centro. Equivalentemente podrías añadir al código HTML align=”middle”:
|
|
||
|
De forma análoga si deseas alinear el texto en la parte superior de la imagen, la opción a elegir sería Arriba y en HTML align=”top”:
|
|
||
Más que aconsejable, la siguiente página Web para practicar tu código HTML http://www.w3schools.com/html/default.asp, en particular la sección HTML Images, Insert images, modifica el código ya definido y haz clic en Edit the text and clic me para ver los resultados.
Los mapas sensibles son imágenes que en función de donde hagas clic te permiten la navegación a diferentes lugares. Por ejemplo, podías tener un mapa de España y en función de la provincia a la que pulsarás te mandará a una página Web con información sobre la provincia seleccionada.
Para realizar mapas sensibles recurriremos a código HTML si bien existen programas comerciales que te facilitan enormemente el trabajo.
|
|
En el ejemplo que vamos a mostrar vamos a crear un mapa sensible con cuatro secciones que redirigirán a cuatro direcciones distintas. Veamos los distintos pasos a seguir. |
1. Tienes que definir que imagen será el mapa sensible. Se realiza mediante el atributo usemap de img:
|
<img src="imagenMapaSensible.gif" usemap="#mymapa"> |
2. Creas el código HTML en el que se encuentra el mapa sensible:
|
<map name="mymapa"> </map> |
3. Finalmente, debemos indicar que región del mapa vincula a que página Web, esto se realiza con area. Para indicar el tipo de región o área utilizamos el atributo shape, puede ser:
Rectangular: rect, precisarás dos coordenadas, uno para el extremo superior derecho (observa que una coordenada son dos puntos, uno para el eje X y otro para la Y) y otro para el extremo inferior izquierda.
Circular: circle, precisarás indicar el centro y el radio.
Polígono: polygon, deberás indicar todos las coordenadas de los vértices.
Nosotros vamos a definir cuatro áreas rectangulares, la primera sería:
|
<area shape="rect" coords="0,0,100,50" href="http://www.ubuntu.com/"> |
Con el atributo href debes indicar a donde navegarás cuando hagas clic en dicha área o región.
|
|
A continuación te mostramos el código final resultante de crear un mapa sensible con cuatro regiones. |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>GuiaWebMaster</title> </head> <body> <img src="imagenMapaSensible.gif" usemap="#mymapa"> <map name="mymapa"> <area shape="rect" coords="0,0,100,50" href="http://www.ubuntu.com/"> <area shape="rect" coords="150,0,200,50"href="http://www.mysql.com/"> <area shape="rect" coords="200,0,250,50" href="http://www.drupal.org.es/"> <area shape="rect" coords="300,0,350,50" href="http://www.php.net/"> </map> </body> </html> |
10.7. Manejo de listas.
Creemos una lista, para ello ve insertando en la vista normal, los
elementos de la lista. Selecciónalos y haz clic en cualquiera
de los botones:
El
de los números te presenta la típica lista numerada, el
de la derecha te permite crear listas con viñetas.
|
|
El código HTML que representa lo que acabamos de realizar es:
Con ul indicamos que comienza una lista sin numeración y con li, indicamos cada fila o línea de la lista. Si queremos tener una lista ordenada, sustituiríamos ul por ol. |
|
|
|
También podemos crear una lista de definiciones o de glosario. Si se nos permite la comparación, utilizaríamos la etiqueta dl para comenzar la lista o el glosario, dt indicaría el nombre del concepto y dd la definición o descripción.
|
|
|
También podemos encadenar listas, como se aprecia en la ilustración de la figura. La lista más externa presenta dos filas o líneas, a su vez cada una de estas filas está formado por sendas listas numeradas (están marcadas con rectángulos). |
||
|
|
<ul> <li>Premios <ol> <li>Premio Ratón 2008</li> </ol> </li> <li>Publicaciones <ol> <li>Pásate a Linux</li> <li>Aprende en libre</li> <li>Guía del perfecto WebMaster </li> </ol> </li> </ul> |
|
10.8. Creación de tablas.
|
Al igual que con las imágenes, la inclusión de
tablas en nuestras páginas es una tarea muy simple.
Selecciona el botón Tabla.
Y configura los parámetros de la misma. De forma totalmente intuitiva, moviendo el ratón, indicamos el número de filas y columnas, luego con un clic aceptamos. |
|
|
Observa el código HTML obtenido con la etiqueta table indicamos que empezamos a definir una tabla. Con tbody se indica que lo que va a continuación es el cuerpo de la tabla, compuestos por filas (tr, table row) y los datos agrupados en columnas (td, table data, datos o celdas). En el ejemplo tenemos una tabla con 4 filas y 2 columnas. Por supuesto, podemos modificar tanto gráficamente como con código HTML los atributos de la tabla: el borde (border=”10”), el espaciado o píxeles entre celdas (cellspacing=”5”) o el relleno (cellpadding=”2”) entre otros. Véase el código HTML resultante en su totalidad, así como la forma de indicarlo gráficamente, basta con hacer clic sobre la tabla y seleccionar en el botón contextual Propiedades de Celda de Tabla … y luego la pestaña Tabla. |
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2"> <tbody> <tr> 1 fila <td></td> <td></td> </tr> <tr> 2ª fila <td></td> <td></td> </tr> <tr>3ª fila <td></td> <td></td> </tr> <tr>4ª fila <td></td> <td></td> </tr> </tbody> </table> |
|
<table style="text-align: left; background-color: red; width: 657px; height: 596px;" border="10" cellpadding="2" cellspacing="5"> <tbody> <tr> <td colspan="2" rowspan="1"><font style="color: white;" size="+2">EJEMPLO DE TABLA</font></td> </tr> [...] </tbody> |
|
|
Desde el menú contextual podemos modificar la tabla, por ejemplo eliminar una fila: Eliminar Tabla, Fila. También en la cabecera de la tabla puedes querer, como se observa en la figura adjunta, unir dos celdas de una fila, selecciona las dos celdas contiguas y en el menú contextual pulsa: Unir celdas seleccionadas. Finalmente en las celdas de la tabla puedes insertar cualquier cosa: texto, imágenes (como en la figura), otras tablas (obteniendo tablas anidadas), etc. |
|
10.9. Trabajando con marcos.
Los marcos nos permiten dividir el documento que se presenta al usuario en varios, podemos por ejemplo tener tres áreas. Así una estructura típica sería la que se muestra en la figura donde encontramos una cabecera, un índice y un cuerpo. Según el usuario seleccione los distintos apartados del índice, el cuerpo se modificará para incluir la información solicitada. Esta forma de navegación es muy sencilla y amigable pero está quedándose obsoleta debido a la gran cantidad de contenido que empieza a agregarse a las páginas Web principalmente gracias a la utilización de la sindicación.
|
CABECERA |
|
|
INDICE |
CUERPO |
|
|
Expliquemos cómo realmente funciona. Tendríamos realmente al menos cuatro páginas Web, una página principal que define la organización en marcos con la etiqueta FRAMESET, una cabecera, otra para el índice y otra u otras para el cuerpo. |
Veámoslo con un ejemplo, la página principal configura la estructura anterior.
|
<html><head></head> <body> <frameset rows="20%,80%"> |
Inicialmente dividimos el marco en dos filas, el primero ocuparía un 20% y el segundo un 80% del área disponible.
|
<frame src="cabecera.html"> |
Nuestro primer marco sería la cabecera, normalmente pondrás aquí el nombre y el logotipo de tu dominio o empresa.
|
<FRAMESET COLS="25%,75%"> |
Luego hemos dividido la segunda fila en dos columnas una con el 25% del espacio libre y otra con el 75%. La primera contendrá el índice, la segunda el cuerpo, donde normalmente tendrás el contenido propiamente dicho de tu Web.
|
<FRAME SRC="indice.html"> |
Indicamos cual es la página Web de la fila de la izquierda, en nuestro caso un fichero llamado indice.html.
|
<FRAME NAME=”marcoContenido” SRC="cuerpo.html"></FRAMESET> |
En esta línea no sólo indicamos la página Web que se mostrará inicialmente al usuario sino que le damos un nombre, concretamente marcoContenido para así poder referenciarlo desde el índice y conseguir la experiencia de navegación que vamos buscando.
|
</frameset></body></html> |
Conviene ahora explicar el índice, pues las páginas del cuerpo son páginas html normales y no precisan modificarse.
|
<html><head> <title>indice</title> </head> <body> INDICE <br> <ol> <li><a href="introduccion.html" target="marcoContenido">Introducción</a></li> Esta es la línea fundamental en ella cuando el usuario selecciona INTRODUCCIÓN, modificamos el marco “target” o destino que hemos llamado marcoContenido e indicamos la página Web que queremos mostrar en ella, en este caso introduccion.html. <li><a href="capitulo1.html" target="marcoContenido"> Capítulo 1</a> </li> <li><a href="capitulo2.html" target="marcoContenido"> Capítulo 2</a> </li> <li><a href="capitulo3.html" target="marcoContenido"> Capítulo 3</a></li> </ol> </body> </html>
|
|
Obsérvese el resultado final. Sin ser un diseño especialmente brillante, cabe destacar su simplicidad. Ten en cuenta que tu página Web puede ser visitada no sólo por geeks sino también por novatos o “recién llegados”. Procura proponerles una navegación cómoda, sencilla e intuitiva. |
|
10.10. Formularios.
Un formulario constituye la herramienta básica que proporciona el lenguaje HTML para la recogida de información en una página Web que posibilite su procesamiento y por tanto la interacción con el usuario del servicio. El ejemplo más clásico es la tienda virtual, donde un usuario selecciona mediante diversos formularios su carrito de la compra e introduce sus datos personales.
Lo más importante a tener en cuenta para realizar un formulario es que existen dos procesos implicados: 1) Recogida de información, 2) Envío de dicha información (post) a un CGI, JSP, etc. para su procesamiento. Vamos a realizar un formulario bastante simple, se trata de la típica página para contactar con el autor de la página visitada. Veamos el código fuente y comentaremos lo más importante:
-
<html><head><title>Contacta con nosotros</title></head>
<body>Contacta con nosotros</font>
<form action="mailto:pasatelinux@gmail.com" method="post"
enctype="text/plain"><br>
La línea en negrita es la más importante, en ella definimos QUÉ vamos a realizar con la información recogida en el formulario, en este caso enviarlo por correo electrónico a pasatelinux@gmail.com. El atributo principal es action y podría ser la dirección URL donde se encuentra el programa que procese la información recogida.
|
<table><tbody> <tr> <td width="75">Nombre:</td> |
Existen muchos elementos que se pueden incluir en el formulario: listas desplegables, de opción, casillas de verificación, botones, etc. Ilustramos en esta línea la inclusión en el formulario de un campo de texto (obsérvese el atributo type), debemos además asignarle un nombre con name. El nombre es imprescindible para que el programa que procese los datos recogidos en el formulario pueda recuperar dicha información.
|
<td width="100"><input name="Nombre" type="text"></td> </tr> <tr> <td width="75">Apellidos:</td> <td width="100"><input name="Apellidos" type="text"></td> </tr> <tr> <td width="75">Comentarios:</td> |
Otro elemento que podemos incluir es un área de texto, en este caso podemos indicar las filas y columnas con los atributos rows y cols respectivamente.
|
<td><textarea name="Comentarios" rows="6" cols="40"></textarea></td> </tr> <tr> |
Finalmente encontramos dos botones, el primero envía los datos, el segundo borra toda la información que el usuario ha proporcionado.
|
<td><input value="Enviar datos" type="submit"></td> <td><input value="Borrar datos" type="reset"></td> </tr> </tbody> </table> </form> </tt> </body> </html> |
|
Debe apreciarse las limitaciones que tiene nuestro ejemplo. Así el usuario sólo puede enviarnos sus comentarios si tiene configurado en su ordenador un cliente de correo. Esto es así porque hemos dejado todo el trabajo en el área del cliente, en los siguientes capítulos aprenderás a recopilar información de los formularios y a procesarla en el servidor. |
|
10.11. ¿Es HTML compatible?
La respuesta es un rotundo No. Por lo tanto existen para empezar dos estrategias: la primera es probar tu página con los navegadores más utilizados en la actualidad y la segunda es seguir los estándares definidos por la W3C. W3C son las siglas de el Consorcio World Wide Web para el desarrollo de estándares Web, su dirección es http://www.w3c.es/. Sin embargo, no siempre sus directrices son completamente seguidas por las distintas empresas, pero eso es otra historia…
10.11.1. Internet Explorer en GNU/Linux.
Aunque a muchos nos moleste, la realidad es que muchos internautas todavía navegan con Internet Explorer bajo Windows. Es una tendencia el uso cada vez mayor del software libre, pero al mismo tiempo muchos administradores y Webmasters, contrastan nuestra primera afirmación en sus logs de visitas.
|
|
Así pues, si quieres que muchos usuarios no encuentren problemas para visualizar tus páginas, necesitas Internet Explorer. No te preocupes si eres usuario de GNU/Linux, podemos instalarlo también en este sistema operativo. ¡Es pues un requisito para cualquier Webmaster probar sus páginas con Internet Explorer! Tienes dos posibilidades: 1) utilizar IEs4Linux o 2) emular Windows desde GNU/Linux. |
|
|
Sigue los siguientes pasos para instalar IEs4Linux en GNU/Linux: |
|
1. Instala los paquetes cabextract y wine:
2. Navega a Ies4Linux (Internet Explorer para GNU/Linux) en http://www.tatanka.com.br/ies4linux/page/Main_Page. 3. Descárgate la última versión (IEs4Linux 2.99.0). 4. Descomprímela en el directorio home usa FileRoller, Ark o tar:
5. Navega al directorio recién creado con:
6. Ejecuta:
7. Te saldrá la ventana de la figura de la derecha, haz clic en Advanced y selecciona Internet Explorer 7. No olvides que la versión 7 está en Beta, lo cual significa que puede darte problemas, en tal caso utiliza la versión 6. Tienes lanzadores para ambas versiones de Internet Explorer en el escritorio, aunque puedes ejecutarlos desde la consola con ./home/usuario/bin/ie6 o ie7. Además, observa que te instala ambas versiones con Adobe Flash 9. Observa en la siguiente pantalla el resultado final. |
|
||||
|
|
|||||
10.11.2. Distintos navegadores: Konqueror, Firefox, Chrome, Opera, Epiphany, SeaMonkey y en consola (Lynx, Links y w3m).
Como hemos ya comentado debes probar tu página en distintos navegadores para no encontrarte con “sorpresas”. Si eres usuario de Windows tendrás versiones gratuitas de la mayoría de los navegadores, pero: ¿Qué pasa si eres usuario de GNU/Linux?
|
GNU/Linux brilla por la variedad de navegadores, así contamos con: Konqueror (el navegador por defecto de KDE) que es muy ligero, Firefox con una cantidad casi inagotable de extensiones y plugins capaces de dotarle de una funcionalidad increíble. Otros navegadores son: Epiphany (epiphany-browser, el que se muestra en la figura), SeaMonkey (iceape, se encuentra en Aplicaciones, Internet, SeaMonkey), Opera, SwiftBox (Navega a http://getswiftfox.com/deb.htm y descarga tu versión en función del microprocesador que tengas, es un paquete debian) y Flock. |
|
|||
|
Para disponer de Flock instala el paquete desde http://www.getdeb.net/app/Flock, deberás indicar que versión de Ubuntu utilizas. Como puedes comprobar no está en los repositorios, es un paquete debian. Luego lo ejecutas desde Aplicaciones, Internet, Flock. |
|
|||
|
Para instalar Opera 9.6, incluye estas líneas al final del fichero /etc/apt/sources.list:
Actualiza la lista de paquetes con:
E instala el paquete opera (tendrás que aceptar la licencia). |
|
|||
|
Si estás pensando ¿Qué pasa con Chrome? La respuesta es que todavía no hay versión nativa para GNU/Linux. Si no puedes esperar, navega a http://www.codeweavers.com/services/ports/chromium/, y descarga CrossOver Chromium que está disponible para la descarga gratuitamente como un paquete debian .deb. Luego se ejecuta desde Aplicaciones, CrossOver Chromium, Chromium. |
|
|||
Si también quieres Safari, tendrás que utilizar wine. Una buena explicación de cómo realizarlo lo encontrarás en http://www.cesarius.net/instala-el-navegador-web-safari-en-ubuntulinux/.
Todos estos navegadores tienen sus contrapartidas en navegadores extremadamente ligeros en modo consola como Lynx y Links2 (lynx, links2), se lanzan con lynx o links2 http://pagina_web_a_visitar. También w3m (w3m w3m-img) es otra posibilidad, escribe en la consola: w3m -T text/html http://pagina_web_a_visitar.
10.11.3. Explotando Firefox: temas, plugins y extensiones.
Firefox es uno de los navegadores más importantes. Es libre, muy personalizable, multiplataforma, incluso existe una versión portable. Como contrapartida, suelen criticarle que es lento y “pesado”. Vamos a estudiarlo a fondo, lo primero que vamos a hacer es indicarle que arranque con varias páginas de inicio.
|
Navega por ejemplo a www.google.es, ahora abre otra pestaña (Archivo, Nueva Pestaña) y accede por ejemplo a es.wikipedia.org/wiki/Portada, así como a las direcciones que consideres oportunas (tampoco debes excederte porque ralentizas de paso el arranque del navegador). Una vez terminado de cargar las paginas, en el menú Editar, selecciona Preferencias. En la ventana que puedes ver a la derecha, selecciona Usar páginas actuales. |
|
||
|
En esta pantalla podemos configurar nuestras preferencias, tales como el directorio de descarga de archivos (Principal), habilitar o no Java y JavaScript (Contenido), configurar el histórico de páginas visitadas y las cookies (Privacidad), etc. La forma más habitual de abrir una nueva pestaña es que cuando encuentres un enlace, te posiciones sobre él y hagas clic con el botón derecho del ratón seleccionando Abrir en una nueva pestaña. |
|||
|
Si observas Firefox viene por defecto con un montón de buscadores (mira la barra de búsqueda): Google, Yahoo, Wikipedia Topic, etc. Si quieres añadir alguno más, haz clic en la barra de búsqueda en el enlace Administrar Motores de Búsqueda. Ahora haz clic en Obtener más motores de búsqueda y busca los que sean más de tu agrado, por ejemplo podrías añadir Ask.com o el diccionario enciclopedia Merrian-Webster. |
Si quieres añadir alguno más, simplemente navega a http://mycroft.mozdev.org/. Busca los que sean más de tu agrado, buenas elecciones son: RAE (Real Academia), Dictionary.com, The Free Dictionary, WordReference en -definition (definición en inglés), WordReference en->es (traductor del inglés al español), etc. |
||
|
Los favoritos, aquí llamados marcadores se añaden simplemente siguiendo la secuencia Marcadores, Añadir esta página a Marcadores o con las teclas Ctrl + D. Observa que hemos organizado nuestros marcadores (algo que se hace necesario cuando el número de nuestros favoritos crece) y creado una carpeta denominada Buscadores. Puedes incluir carpetas, separadores, eliminar o añadir marcadores, etc. desde Marcadores, Administrar marcadores. |
|
||
|
Fíjate que hemos tecleado potatoes (patatas) y hemos seleccionado el motor de búsqueda The Free Dictionary. Nos redirige a la palabra potato (que es el singular), con una descripción bastante extensa del vocablo. |
|
||
|
También podemos suscribirnos a canales usando marcadores dinámicos. ¿Qué es un canal? Un canal te permite acceder de la forma más rápida y sencilla posible a los contenidos de otro portal o gestor de contenidos. RSS son las siglas que significan sindicación simple de contenidos, es decir, es un protocolo para gestionar el acceso a los contenidos de otra Web.
¿Cómo agrego marcadores dinámicos? Basta pulsar sobre el icono: |
|
||
|
Luego, haz clic en Suscribirse ahora. Observa cómo te crea un marcador dinámico en la carpeta de Marcadores dinámicos. Ahora en la barra de herramientas de marcadores (si no la ves: Ver, Barra de herramientas, Barra de herramientas de marcadores) tendrás el icono Gizmodo ES; al hacer clic sobre él dispondrás de un listado dinámico de noticias. Observa en la figura un listado de las noticias de Gizmodo, basta con hacer clic en la que te interese y accederás a toda la información bajo dicho titular. Ten en cuenta que este contenido cambiará de forma dinámica, es decir, tendrás siembre bajo esta pestaña las últimas noticias de tus portales o blogs favoritos. |
Por supuesto también puedes utilizar un lector de noticias para el mismo propósito. Ejemplos serían Google Reader (online), Juice (Windows) y Liferea. |
||
|
Liferea se instala con el paquete liferea:
Luego lánzalo desde Aplicaciones, Internet, Liferea lector de noticias. Haz clic en Nueva suscripción y copia en el cuadro de texto que se muestra en la figura, Origen del canal, la dirección de la ruta de enlace de cualquier icono RSS. |
|
||
,
este se encuentra en la Web cada vez con más frecuencia, en
la figura hemos visitado http://www.gizmodo.es/.
Las extensiones y los plugins amplían la funcionalidad de Firefox, los temas consiguen personalizarlo, dándole una apariencia que se adapte más a nuestros gustos y preferencias.
|
|
Sin embargo, amén de todos estos vocablos, la forma de instalarlos es básicamente la misma. |
||
|
1.- Abre el navegador Firefox. 2.-Selecciona Herramientas, Complementos. 3.-Haz clic en el botón Obtener complementos, y luego en el enlace Examinar todos los complementos. Así podrás instalarlas a clic de ratón. Normalmente tendrás que reiniciar el navegador. |
|
||
|
En la pestaña Temas podrás también cambiar la apariencia de nuestro navegador. Observa que tienes las extensiones organizadas por categorías, además también puedes instalar desde aquí los temas y los plugins. |
|
||
|
4.- Navega a la categoría que más te interese, por ejemplo Desarrollo web y elige la extensión deseada. Observarás una breve descripción y un botón que reza “ Añadir a Firefox ”, haz clic sobre él. Luego te advierte que sólo instales complementos de autores de los que confíes, si este es el caso, pulsa Instalar ahora. |
|
||
|
Entre extensiones que debes tener en cuenta se encuentran: * Firebug, te permite visualizar, depurar y editar páginas HTML, Javascript y CSS. * Web Developer, conjunto de utilidades para el desarrollador Web. Así si quieres validar tu página HTML, sigue la secuencia: Herramientas, Web Developer, Tools, Validate HTML. * Adblock Plus, bloquear popups. * FlashGot, DownloadThemAll!: Gestores de descargas. * FoxLingo: Herramienta muy completa que incluye traductores y más utilidades. * FireShot, permite documentar tus Web o hacer capturas de páginas Web. |
|||
10.11.4. Configurando el navegador por defecto.
|
Para seleccionar el navegador por defecto, escribe en la consola:
Te solicitará la contraseña, luego elige el número del navegador que desees sea el predefinido. |
|
10.11.5. Cumpliendo con el estándar: validación.
|
Tal como comentamos previamente debes verificar la correcta visualización de tus páginas Web en los distintos navegadores. Sin embargo, también deberías comprobar que cumpla los estándares. Así tienes más posibilidades para que se pueda ver sin problemas en casi cualquier navegador. Ten en cuenta que tu página puede ser visitada no sólo desde un ordenador sino desde cualquier otro dispositivo: pda, smartphone (tipo iPhone, Android, Windows Mobile), etc. |
Observa que en el cuadro de texto etiquetado Address, debes escribir la dirección o URL de tu página Web, luego haz clic en el botón Check (comprobar). |
Para comprobar que tus creaciones se ajustan a los estándares puedes utilizar plugins de Firefox como Web Developer. Sin embargo, nuestro consejo es visitar la página http://validator.w3.org/ e indicar la dirección de tu página Web (URL). Un consejo: ¡Ten paciencia y dedícale tiempo!
10.12. Necesito DreamWeaver, ¿Qué hago?
Si no puedes renunciar a esta gran herramienta y eres usuario de GNU/Linux tienes dos alternativas. Una sería utilizar CrossOver Office que es una herramienta que te permite instalar fácilmente aplicaciones Windows en GNU/Linux (http://www.codeweavers.com/). La segunda opción es virtualizar, es decir, instalar Windows en GNU/Linux y correr dichas aplicaciones Windows utilizando las ventajas de la virtualización.
Existen muchas soluciones de virtualización: QEmu, VMWare Server, VirtualBox. La instalación de éstas se sale fuera del alcance de esta obra, si quieres un análisis detallado puedes consultar nuestra obra ¡Pásate a Linux!
10.13. La evolución del HTML el XHTML.
Desde que el 6 de agosto de 1991 se publicará la primera página Web de la historia, por Tim Berners-Lee en el centro de investigación europeo CERN, HTML ha evolucionado considerablemente, manteniendo como objetivo la misma filosofía, poder visualizar información entre equipos distantes. Nos encontramos, a día de hoy, en la versión cinco y trabajando con su sucesor el XHTML.
|
|
XHTML, extensible hypertext markup language, lenguaje extensible de marcado de hipertexto es la evolución de HTML basado en XML, extensible markup languaje, lenguaje extensible de marcado, que es una simplificación y adaptación de SGML. |
Las especificaciones de todos estos lenguajes las podemos encontrar en Word Wide Web Consortium, http://www.w3.org dirigido actualmente por Tim Berners-Lee y más concretamente la de XHTML en la siguiente dirección: http://www.w3.org/tr/xhtml1
Crear páginas con XHTML es similar que hacerlas con HTML, lo único diferente es que XHTML es un poco más restrictivo en la sintaxis, concretamente:
Los nombres de las etiquetas y de los atributos han de aparecer siempre en minúsculas.
Para indicar el valor de los atributos utilizaremos siempre las comillas dobles.
Todas las etiquetas son pares, es decir, se abren y se cierran. Dispones de una nueva sintaxis para indicar las etiquetas simples de HTML, como por ejemplo <br> ahora con XHTML puedes escribir <br></br> o simplemente <br/>.
Las etiquetas se tienen que cerrar en el mismo orden que se abrieron.
No se utilizan los atributos name para identificar las elementos, en su caso utilizamos el atributo id.
Para indicar código JavaScript no se utiliza la etiqueta <script> sino las etiquetas <!CDATA[ y ]].
Especificar al principio del documento mediante la etiqueta DOCTYPE que normas estamos siguiendo de XHTML, disponemos de tres posibilidades:
1. Estricto:
-
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Stric//EN”
Idóneo para su utilización con hojas de estilo, CSS, en el siguiente capítulo entramos en detalle. Se separan completamente el contenido de la presentación del mismo.
2. Transitorio:
-
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
Incluye todas las propiedades del estricto, pero añade compatibilidad con características de presentación en desuso.
3. Frameset:
-
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
Compatibilidad con frames, actualmente está en desuso, nosotros no te aconsejamos que la utilices.
|
|
Aunque en un principio XHTML parezca más estricto, esta característica juega a nuestro favor a largo plazo para crear páginas correctas y fácilmente modificables. |
Siguiendo estas simples normas estarás creando páginas XHTML, respecto a las etiquetas que puedes utilizar para crear tus documentos, en general, son las mismas que eh HTML. A continuación te indicamos un par de direcciones Web donde puedes disponer de una buena chuleta para XHTML bien organizada y funcional
http://www.bitacoradewebmaster.com/2006/12/19/chuletas-chuletas-y-mas-chuletas/